<script setup>

import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

  onMounted(()=>{
    displayProps.value = props.testParams
  })
  const props = defineProps({
    testParams: JSON
  })
  const displayProps = ref({
    id:null,
    name: '',//8字
    detail:'',//30字
    startTime: '',
    endTime: '',
    timeLimit: 0,
    aiUse: false,
    totalScore: 0,
    xuanzeNum: 0,
    xuanzeScore: 0,
    yueduArticleNum: 0,
    yueduNum: 0,
    yueduScore: 0,
    xuanciArticleNum: 0,
    xuanciNum: 0,
    xuanciScore: 0,
    wanxingArticleNum: 0,
    wanxingNum: 0,
    wanxingScore: 0,
    gaicuoArticleNum: 0,
    gaicuoNum: 0,
    gaicuoScore:1,
    fanyiNum: 0,
    fanyiScore: 0,
    zuowenNum: 0,
    zuoWenScore: 0
  })
  const emit = defineEmits()
  const router = useRouter()
  const updateTestPrams = () => {
    emit('update:testPrams', displayProps);
    ElMessage({
      type: 'success',
      message: '习题组配置成功，请使用"题目设置"上传具体题目'
    })
  };
  const activeName = ref('1')
</script>

<template>
  <div class="gradint-background">
    <!--套卷信息-->
    <div class="test-set-container">
      <h1>习题组基本信息</h1>
      <!--名称-->
      <div class="test-set-line">
        习题组名称：
        <el-input maxlength="8" v-model="displayProps.name" style="width: calc(100% - 140px)" placeholder="不超过8个字符" />
      </div>
      <!--详情-->
      <div class="test-set-line">
        详情：
        <el-input
            resize="none"
            v-model="displayProps.detail"
            style="width: calc(100% - 140px)"
            :autosize="{ minRows: 8, maxRows: 16 }"
            maxlength="30"
            type="textarea"
            placeholder="不超过30个字符"
        />
      </div>
      <!--开始日期-->
      <div class="test-set-line">
        开始时间：
        <el-date-picker
            v-model="displayProps.startTime"
            type="datetime"
            placeholder="选择答题开始时间"
        />
      </div>
      <!--结束日期-->
      <div class="test-set-line">
        结束时间：
        <el-date-picker
            v-model="displayProps.endTime"
            type="datetime"
            placeholder="选择答题结束时间"
        />
      </div>
      <!--答题时长-->
      <div class="test-set-line">
        答题限时（分钟）：
        <el-input-number v-model="displayProps.timeLimit" :min="10" :max="300" :step="10"/>
      </div>
      <!--ai助手-->
      <div class="test-set-line">
        允许答题时使用AI问答助手：
        <el-switch v-model="displayProps.aiUse" active-text="允许" inactive-text="禁止" />
      </div>
      <!--确定按钮-->
      <div class="score-set-sure">
        <el-button @click="updateTestPrams" type="primary">确定更改</el-button>
      </div>
    </div>
    <!--给分设置-->
    <div class="score-set-container">
      <h1>题型及给分</h1>
      <div class="score-set">
        <el-collapse v-model="activeName" accordion style="padding: 12px">
          <el-collapse-item title="单项选择" name="1" class="collapse-line">
            <div>
              题目数量：
              <el-input-number v-model="displayProps.xuanzeNum" :min="0" :max="300" :step="1"/>
            </div>
            <div>
              每题分值：
              <el-input-number v-model="displayProps.xuanzeScore" :min="0" :max="300" :step="1"/>
            </div>
          </el-collapse-item>
          <el-collapse-item title="阅读理解" name="2" class="collapse-line">
            <div>
              文章数量：
              <el-input-number v-model="displayProps.yueduArticleNum" :min="0" :max="300" :step="1"/>
            </div>
            <div>
              每题分值：
              <el-input-number v-model="displayProps.yueduScore" :min="0" :max="300" :step="1"/>
            </div>
          </el-collapse-item>
          <el-collapse-item title="选词填空" name="3" class="collapse-line">
            <div>
              文章数量：
              <el-input-number v-model="displayProps.xuanciArticleNum" :min="0" :max="300" :step="1"/>
            </div>
            <div>
              每题分值：
              <el-input-number v-model="displayProps.xuanciScore" :min="0" :max="300" :step="1"/>
            </div>
          </el-collapse-item>
          <el-collapse-item title="完形填空" name="4" class="collapse-line">
            <div>
              文章数量：
              <el-input-number v-model="displayProps.wanxingArticleNum" :min="0" :max="300" :step="1"/>
            </div>
            <div>
              每题分值：
              <el-input-number v-model="displayProps.wanxingScore" :min="0" :max="300" :step="1"/>
            </div>
          </el-collapse-item>
          <el-collapse-item title="短文改错" name="5" class="collapse-line">
            <div>
              文章数量：
              <el-input-number v-model="displayProps.gaicuoArticleNum" :min="0" :max="300" :step="1"/>
            </div>
            <div>
              每题分值：
              <el-input-number v-model="displayProps.gaicuoScore" :min="0" :max="300" :step="1"/>
            </div>
          </el-collapse-item>
          <el-collapse-item title="翻译" name="6" class="collapse-line">
            <div>
              题目数量：
              <el-input-number v-model="displayProps.fanyiNum" :min="0" :max="300" :step="1"/>
            </div>
            <div>
              每题分值：
              <el-input-number v-model="displayProps.fanyiScore" :min="0" :max="300" :step="1"/>
            </div>
          </el-collapse-item>
          <el-collapse-item title="作文" name="7" class="collapse-line">
            <div>
              题目数量：
              <el-input-number v-model="displayProps.zuowenNum" :min="0" :max="300" :step="1"/>
            </div>
            <div>
              每题分值：
              <el-input-number v-model="displayProps.zuoWenScore" :min="0" :max="300" :step="1"/>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

    </div>

  </div>
</template>

<style scoped>
  .gradint-background{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  /*套卷信息*/
  .test-set-container{
    height: calc(100% - 48px);
    margin: 12px;
    padding: 12px;
    flex: 0.4;
    animation: left-in .6s 1;
    display: flex;
    flex-direction: column;
  }
  .test-set-line{
    margin: 20px 12px 0 12px;
    display: flex;
    align-items: start;
    justify-content: space-between;
  }
  .score-set-sure{
    flex: 1;
    width: calc(100% - 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px;
  }
  .score-set-sure button{
    width: 100%;
  }
  /*给分设置*/
  .score-set-container{
    height: calc(100% - 48px);
    margin: 12px;
    padding: 12px;
    flex: 0.6;
    animation: right-in .6s 1;
    display: flex;
    flex-direction: column;
    align-items: center;

  }
  .score-set{
    flex: 1;
    width: calc(100% - 48px);
    background-color: #fff;
    margin: 12px;
    padding: 0 12px;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  ::v-deep .el-collapse-item__content{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 12px;
  }
  h1{
    font-size: 19px;
    letter-spacing: 2px;
    width: 100%;
    margin-bottom: 12px;
  }
</style>